<template>
  <view class="login-box">
    <u-navbar
      title="登录注册"
      :title-style="{ 'font-weight': 'bold', 'font-size': '18px' }"
      fixed
      placeholder
      @leftClick="handleBack"
    ></u-navbar>

    <view>
      <input
        v-model="username"
        class="weui-input"
        placeholder="请输入用户名"
      />
    </view>

    <view class="button-box">
      <button
        class="login"
        @click="handleLoginSuccess"
      >
        快捷登录或注册
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      username: undefined,
    }
  },
  methods: {
    // 登录成功，更新store数据
    async handleLoginSuccess() {
      if (!this.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none',
        })
        return
      }

      const _this = this
      uni.login({
        async success(data) {
          if (data.code) {
            const openidRes = await _this.$request.get(`/wx/getOpenid`, {
              params: {
                code: data.code,
              },
            })
            if (openidRes.code !== 200) {
              if (!openidRes.data.openid) {
                uni.showToast({
                  title: openidRes.msg,
                  icon: 'none',
                })
                return
              }
            }
            const res = await _this.$request.post(`/user/reg`, {
              us: _this.username,
              openid: openidRes.data.openid,
            })
            if (res.code === 200) {
              _this.$store.commit('user/setUserInfo', { username: _this.username })
              uni.$emit('loginSuccess')
              uni.showToast({
                title: '登录成功',
                duration: 1500,
                icon: 'success',
                mask: true,
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                })
              }, 1500)
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              })
            }
          } else {
            console.log('登录失败！' + data.errMsg)
          }
        },
      })
    },
    // 导航栏返回
    handleBack() {
      uni.navigateBack({
        delta: 1,
      })
    },
  },
}
</script>

<style lang="less" scoped>
@themcolor: #ff6a00;

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  height: 100%;

  .title {
    margin-top: 20px;
    line-height: 20px;
    color: #0c1d31;
    font-size: 20px;
    font-weight: 600;
  }

  .button-box {
    margin-top: 14px;
    width: 100%;
    .login,
    ::v-deep .login button {
      max-width: 324px;
      width: 100%;
      height: 48px;
      line-height: 48px;
      border-radius: 24px;
      background-color: @themcolor !important;
      color: #fff;
      font-size: 16px;
    }
  }

  ::v-deep .weui-input {
    margin: 20px 0;
    font-size: 15px;
  }
}
</style>
